﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品信息</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/vue/vue.min.js"></script>
<script src="js/jquery/jquery.min.js"></script>
<script src="js/laypage/laypage.js" charset="utf-8"></script>
<script src="js/layer/layer.js" charset="utf-8"></script>
</head>
<style>
	#image{
	height:100px;
	width:150px;
text-align:center;

	}
</style>
<body>
	<div id="app" class="container">
	
		<form class="form-inline bg-danger" role="form">			
		  查询条件：
		  <div class="form-group">
		    <label class="sr-only" for="username">商品名称</label>
		    <input type="text" class="form-control" id="name" placeholder="商品名称">
		  </div>
		  <div class="form-group">
		    <label class="sr-only" for="userage">最低价格</label>
		    <input type="text" class="form-control" id="minprice" placeholder="最低价格"> ---
		     <label class="sr-only" for="userage">最高价格</label>
		    <input type="text" class="form-control" id="maxprice" placeholder="最高价格">
		  </div>
		  <button type="button" id="findUser" class="btn btn-success">查询用户</button>
		  <button type="button" id="addUserBtn" class="btn btn-primary">增加商品</button>
		</form>
		<div class="table-responsive">
			<table class="table table-bordered">
				<thead>
					<tr class="success">
						<td>序号</td>
						<td>商品名</td>
						<td>价格</td>
						<td>描述</td>
						<td>图片</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr class="active" v-for="(item,index) in result">
						<td>{{index+1}}</td>
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td>{{item.description}}</td>
						<td><img alt="" id="image" v-bind:src="item.path" /></td>
						<td><a href="#" @click="editEvent(item.id)">编辑</a> <a
							href="#" @click="delEvent(item.id)">删除</a></td>
					</tr>
				</tbody>
			</table>
			<div id="pagenav"></div>
		</div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el : "#app",
			data : {//时间日期通过vue转成正常日期的方法{{new Date(item.gdate).toLocaleString()}}
				result : []
			}
		});
		
		//分页操作`
		var getPageList=function(curr){
			$.ajax({
				type:"get",
				dataType:"json",
				url:"/product/getcond",
				data:{//向客户端传递参数
					pageNum:curr || 1,
					pageSize:5,
					name:$("#name").val(),
					minprice:$("#minprice").val(),
					maxprice:$("#maxprice").val()
				},
				success:function(msg){
					app.result=msg.result;
					laypage({
						cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
						pages : msg.totalPage, //总页数
						first : true,
						last : true,
						curr : curr || 1, //当前页
						jump : function(obj, first) { //触发分页后的回调
							if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
								getPageList(obj.curr);
							}
						}
					});
					
				}
			});
		}
		getPageList();//第一次进入网页进行第一次查询
		//查询商品信息
		$('#findUser').on('click', function() {
			getPageList();
		});
		//增加商品信息
		$('#addUserBtn').on('click', function() {
			
			layer.open({
				type : 2,
				title : '添加商品',
				fix : false,
				maxmin : true,
				shadeClose : true,
				area : [ '900px', '650px' ],
				content : 'order_add.html',
				end : function() {
					getPageList();

				}
			});
			
		});
		//修改商品信息
	var editEvent=function(id){
			layer.open({
				type:2,
				title:"修改商品",
				fix:false,
				maxmin:true,
				shadeClose:true,
				area:['900px','650px'],
				content:'/product/find?id='+id,
				end:function(){
					getPageList();
				}
			})
		}
		//删除商品信息
		var delEvent=function(id){
			//产生询问框
			layer.confirm('您确定要删除吗？',{
				btn:['是','否']//询问框按钮
			},function(){//点击是触发的事件
				$.ajax({
					type:'get',
					dataType:'json',
					data:{id:id},
					url:'/product/del',
					success:function(msg){
						alert(msg);
						getPageList();
						layer.msg({icon:5});
					}
				})
				
			},function(){//点击否触发的事件
				
			}
			
			)
		}
	
	</script>

</body>
</html>